<template>
  <el-dialog
    v-model="props.addOperatorParameterVisible"
    :title="props.rowData?._id ? '修改算子参数' : '新增算子参数'"
    width="806"
    destroy-on-close
    @close="handleVisible('cancel')"
  >
    <div class="add_operatorParameter">
      <el-form ref="addOperatorParameterForm" :rules="rules" :model="formData" inline size="small" class="form_class" label-width="100">
        <el-form-item label="算子名" prop="operatorName" style="width: 100%">
          <el-select
            :disabled="modalType === 'edit'"
            clearable
            style="width: 95%"
            v-model="formData.operatorName"
            filterable
            remote
            reserve-keyword
            placeholder="请输入算子名"
            :remote-method="remoteMethod"
            :loading="selectLoading"
            @change="handleChange"
          >
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="path" prop="path">
          <el-input v-model="formData.path" />
        </el-form-item>
        <el-form-item label="type" prop="type">
          <el-select v-model="formData.type">
            <el-option label="page" value="page"></el-option>
            <el-option label="parameter_field" value="parameter_field"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="sort_order" prop="sortOrder">
          <el-input v-model="formData.sortOrder" />
        </el-form-item>
        <el-form-item label="component">
          <el-input v-model="formData.component" />
        </el-form-item>
        <el-form-item label="label">
          <el-input v-model="formData.label" />
        </el-form-item>
        <el-form-item label="field_id">
          <el-input v-model="formData.fieldId" />
        </el-form-item>
        <el-form-item label="field_type">
          <el-select v-model="formData.fieldType">
            <el-option label="input" value="input"></el-option>
            <el-option label="select" value="select"></el-option>
            <el-option label="radio-group" value="radio-group"></el-option>
            <el-option label="table" value="table"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="value_type">
          <el-select v-model="formData.valueType">
            <el-option label="input" value="number"></el-option>
            <el-option label="select" value="text"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="自定义配置" style="width: 96%">
          <el-input :rows="3" type="textarea" v-model="formData.custom" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleVisible('cancel')">取消</el-button>
        <el-button type="primary" @click="submitAdd"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
      
<script name="AddOperatorParameter" setup>
import { saveOperatorParametor, updateOperatorMapParameter } from '@/api/parameterLibrary';
import { getOperatorList } from '@/api/algorithmLibrary';
const props = defineProps(['addOperatorParameterVisible', 'rowData']);
const emit = defineEmits(['handleEvent']);
const addOperatorParameterForm = ref(null);
const modalType = props.rowData?._id ? 'edit' : 'add';
const formData = ref({
  path: props.rowData?.path || '',
  type: props.rowData?.type || '',
  sortOrder: props.rowData?.sortOrder || '',
  component: props.rowData?.component || '',
  label: props.rowData?.label || '',
  fieldId: props.rowData?.fieldId || '',
  fieldType: props.rowData?.fieldType || '',
  valueType: props.rowData?.valueType || '',
  custom: props.rowData?.customJsonFieldObject || '',
  operatorRefId: props.rowData?.operatorRefId,
  operatorName: props.rowData?.operatorName,
  _id: props.rowData?._id || ''
});
const rules = ref({
  path: [{ required: true, message: '请输入path', trigger: 'blur' }],
  type: [{ required: true, message: '请选择type', trigger: 'blur' }],
  sortOrder: [{ required: true, message: '请输入sortOrder', trigger: 'blur' }]
});
const options = ref([]);
const selectLoading = ref(false);

const handleChange = (event) => {
  formData.value.operatorRefId = event;
};
const remoteMethod = (query) => {
  if (query) {
    selectLoading.value = true;
    const params = {
      pageNum: 1,
      pageSize: 20,
      operatorName: query,
      algorithmRealize: '',
      caculate: '',
      type: '',
      isAsc: 'descending'
    };
    setTimeout(() => {
      getOperatorList(params)
        .then((res) => {
          if (res?.rows) {
            options.value = res?.rows.map((el) => {
              return { label: el.operatorName, value: el._id };
            });
          }
        })
        .finally(() => {
          selectLoading.value = false;
        });
    }, 200);
  } else {
    options.value = [];
  }
};
// 通知父组件
const handleVisible = (modalType) => {
  emit('handleEvent', { type: modalType });
};
// 提交数据
const submitAdd = () => {
  addOperatorParameterForm.value.validate((valid) => {
    if (!valid) {
      return;
    } else {
      //提交
      if (formData.value.custom) {
        try {
          formData.value.customJsonFieldObject = JSON.parse(formData.value.custom);
        } catch (err) {
          ElMessage({ showClose: true, message: '请输入正确的JSON格式数据', type: 'error' });
          return;
        }
      }
      const paramData = {...formData.value};
      delete paramData.operatorName;
      if (modalType === 'edit') {
        updateOperatorMapParameter(paramData).then((res) => {
          ElMessage({ showClose: true, message: '修改成功', type: 'success' });
          handleVisible('refresh');
        });
      } else {
        saveOperatorParametor(paramData).then((res) => {
          ElMessage({ showClose: true, message: '新增成功', type: 'success' });
          handleVisible('refresh');
        });
      }
    }
  });
};
</script>
  <style scoped lang="scss">
.parameterView {
  display: flex;
  .left {
    width: 200px;
    overflow: auto;
    .custom-tree-node {
      display: flex;
      .icon-class {
        color: rgba(193, 190, 190);
        font-size: 120%;
      }
      .node-title {
        padding-left: 5px;
      }
    }
  }
  .right {
    width: calc(100% - 200px);
    padding-left: 20px;
    .form_class {
      border: 1px solid #dddddd7a;
      padding: 10px;
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .btn_div {
      margin-bottom: 10px;
    }
    .table_div {
      .pagenation {
        display: flex;
        justify-content: end;
        margin-top: 10px;
      }
    }
  }
}

:deep(.el-cascader) {
  width: 100%;
}
</style>